<template>
	<view class="changePassword">
		<view class="changePassword_form" v-show="current==0">
			<view class="uni-form-item uni-column">
				<input class="uni-input" type="number" placeholder="请输入手机号" />
			</view>
			<view class="uni-form-item uni-column">
				<input class="uni-input" type="text" placeholder="请输入短信验证码" />
				<button class="shortBt" @click="shortBt"  plain="true">获取验证码</button>
			</view>
            <view class="uni-form-item uni-column">
                <input class="uni-input" password type="text" placeholder="请输入新的登录密码(6-16位字母,数字)" />
            </view>
			<button type="warn" class="nextStep" @click="nextStepFn" plain="true">下一步</button>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	export default {
		data() {
			return {
				items: ['快速登录','密码登录'],
				current: 0
			};
		},
		components: {
			uniIcons
		},
		methods:{
			//获取短信码
			shortBt(){
				console.log('获取短信码')
			},
			//下一步
			nextStepFn(){
				console.log('下一步')
			}
		}
	}
</script>

<style lang="scss">
	.changePassword{
			.uni-input{
				height: 80rpx;
				line-height: 80rpx;
				border-bottom:1px solid #eaeaea ;
			}
			.changePassword_form{
				padding: 50rpx;
				border-top: 1px solid #eaeaea;
				.uni-column{
					position: relative;
					margin-bottom: 20rpx;
					.shortBt{
						position: absolute;
						right: 0;
						top: 0;
						width: 210rpx;
						border-radius: 60rpx;
						height: 65rpx;
						line-height: 65rpx;
						font-size: 32rpx;
						border-color: #ed915d;
						color: #ed915d;
						transform: translateY(5rpx);
						padding: 0 10rpx;
					}
				}
				.uni-column:last-child{
					margin-bottom: 0rpx;
				}
			}
			.password_ogon{
				padding: 50rpx;
				.navigatorHover{
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #7d9dc3;
				}
			}
			.nextStep{
				border-radius: 60rpx;
				margin-top: 100rpx;
				color: #ed915d;
				font-size: 36rpx;
				background-color: #f4c2a3;
				border-color: #f4c2a3;
			}
	}
</style>
